<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08- slot内容分发</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
</head>
<body>
<div id="app">

     <!--<my-hello>aaaaaaaaaaaaaaaaaaa</my-hello>-->
  <my-hello>
        <ul slot="s1">
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
        </ul>
        <ol slot="s2">
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ol>
    </my-hello>


</div>

<template id="hello">
    <div>
        <slot name="s2"></slot>
        <h3>welcome to beijing</h3>
        <!-- <slot>如果没有原内容，则显示该内容</slot> -->
        <slot name="s1"></slot>
    </div>
</template>

<script>

    let vm = new Vue({ //父组件
        el: "#app",
        components: {
            'my-hello': {
                template: '#hello'
            }
        }
    })
</script>
</body>
</html>